<template>
  <div class="ke">
    <div class="powertop">
		<!-- <router-link class="powertopli " to="/finance/onlinecommission">原佣金收入</router-link> -->
      <router-link class="powertopli powertopact" to="/yongjin/yongjinwai" v-if="checkquanxian('V0102').length > 0">佣金收入管理</router-link>

      <!-- <router-link class="powertopli " to="/yongjin/yongjinnei">系统内佣金收入</router-link> -->
      <router-link class="powertopli " to="/yongjin/yongjinchaxun" v-if="checkquanxian('V0103').length > 0">佣金收入查询</router-link>

      <router-link class="powertopli " to="/yongjin/yongjinbaobiao" >佣金收入报表</router-link>


      <!-- <router-link class="powertopli " to="/finance/onlinecommission/tkshouru">提卡费收入</router-link> -->
    </div>
    <div v-loading='loading' style="padding: 20px;">
      <div class="kflexc">
        <el-button type="danger" round style="margin-right: 20px;" @click="log2kai">导入收入</el-button>
        <div @click="xiazai" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>

        <div style="width: 250px; margin-right: 20px;">
          <el-select v-model="all.status" style="width: 250px;" placeholder="收入确认状态">
           <el-option  label="待确认" value="0"> </el-option>

           <el-option  label="已确认" value="20"> </el-option>
          </el-select>
        </div>
        <div style="width: 250px; margin-right: 20px;">
          <el-input v-model="all.name" placeholder="导入表名称"></el-input>
        </div>
        <div style="margin-right: 20px;">
          <el-date-picker v-model="all.date" style="width: 250px;" type="month" value-format="yyyy-MM" placeholder="选择月"></el-date-picker>
        </div>
        <el-button type="primary" round  style="margin-right: 20px;" @click="search()">搜索</el-button>
      </div>
      <el-table :data="list" border style="width: 100%; margin: 20px 0;">

        <el-table-column align='center' prop='name' label="收入名称"></el-table-column>
        <el-table-column align='center' prop='operator' label="运营商">
          <template slot-scope="scope">
            <!-- <div v-if="scope.row.operator == 10086">中国移动</div>
            <div v-if="scope.row.operator == 10010">中国联通</div>
            <div v-if="scope.row.operator == 10000">中国电信</div> -->
            <div v-if="scope.row.operator == 10099">中国广电</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='channel' label="归属地"></el-table-column>
        <el-table-column align='center' prop='date' label="月份"></el-table-column>
        <el-table-column align='center' prop='created_at' label="导入时间"></el-table-column>
        <el-table-column align='center' prop='order_count' label="导入订单数量"></el-table-column>
        <el-table-column align='center' prop='success_count' label="匹配订单数量"></el-table-column>
        <el-table-column align='center' prop='success_money' label="匹配金额"></el-table-column>
        <el-table-column align='center' prop='error_money' label="未匹配金额"></el-table-column>
        <el-table-column align='center' prop='orders_money' label="导入金额"></el-table-column>
        <el-table-column align='center' prop='status' label="收入确认状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">待确认</div>
            <div v-if="scope.row.status == 10">已确认</div>
            <div v-if="scope.row.status == 20">已确认</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='uname' label="导入人"></el-table-column>
        <el-table-column align='center' label="操作" width="300px">
          <template slot-scope="scope">
            <div class="kflexc">
              <div style="color: #409EFF; margin: 10px; cursor: pointer;" v-if="scope.row.confirm_url" @click="xiazai2(scope.row.confirm_url)">下载确认表</div>

              <el-upload ref="upload" action="#" :http-request="(params) => shangchuanquerenbiao(params,scope.row)" :show-file-list="false" v-if="scope.row.confirm_url">
                 <el-button type="text" round style="line-height: 23px;">上传确认表</el-button>
              </el-upload>

              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link" style="color: #409EFF;" @click="choose(scope.row)">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">
                      <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup3">
                        <el-button type="text" >上传上游原始表格</el-button>
                      </el-upload>
                  </el-dropdown-item>

                  <el-dropdown-item command="b">下载收入明细</el-dropdown-item>
                  <el-dropdown-item command="c">撤销导入</el-dropdown-item>
                  <!-- <el-dropdown-item command="d">支出审核</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog title="返利领取记录" center :visible.sync="log" :close-on-click-modal="false" width="1200px">
      <el-table :data="list2" border style="width: 100%; margin: 20px 0;">
        <el-table-column align='center' prop='month' label="月份"></el-table-column>
        <el-table-column align='center' prop='status_name' label="领取状态"></el-table-column>
        <el-table-column align='center' prop='rebate_amount' label="金额"></el-table-column>
        <el-table-column align='center' prop='operator_at' label="登记时间"></el-table-column>
        <el-table-column align='center' prop='rebate_status_name' label="充值状态"></el-table-column>
        <el-table-column align='center' prop='remark' label="失败原因"></el-table-column>
        <el-table-column align='center' prop='rebate_at' label="到账时间"></el-table-column>
        <el-table-column align='center' label="登记返利">
          <template slot-scope="scope">
            <el-button v-if="vsdate(scope.row.month,nowdateym)" type="text" :disabled="!(scope.row.status <10)" @click="querenlingqu(scope.row)">登记返利</el-button>
            <el-button v-else type="text" :disabled="!(scope.row.status <10)" @click="querenlingqu(scope.row)">申请补领</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="log = false">好的</el-button>
      </div>
    </el-dialog>
    <el-dialog title="校验结果" center :visible.sync="jiaoyanlog" :close-on-click-modal="false" width="1200px">
      <el-table :data="jiaoyanlist" border style="width: 100%; margin: 20px 0;">
        <el-table-column align='center' label="校验结果">
          <template slot-scope="scope">
            {{scope.row}}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="jiaoyanlog = false">好的</el-button>
      </div>
    </el-dialog>
    <el-dialog title="请选择导入月份" center :visible.sync="log2" :close-on-click-modal="false" width="650px">
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">收入名称</div>
        <div>
          <el-input v-model="all2.name" style="width: 500px;" placeholder="收入名称"></el-input>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">运营商</div>
        <div>
          <el-select v-model="all2.operator" style="width: 500px;" placeholder="请选择运营商">
            <!-- <el-option label="中国移动" value="10086"></el-option>
            <el-option label="中国联通" value="10010"></el-option>
            <el-option label="中国电信" value="10000"></el-option> -->
            <el-option label="中国广电" value="10099"></el-option>
          </el-select>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">归属地</div>
        <div>
          <el-cascader @change="changeaddress" style="width: 500px;" v-model="channel" :options="citylist"></el-cascader>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">产品渠道</div>
        <div>
          <el-select v-model="all2.product_source" clearable filterable placeholder="请选择产品渠道" style="width: 500px;" >
              <el-option :label="item" :value="item" v-for="item in qudaolaiyuanlists" :key="item"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">导入月份</div>
        <div>
          <el-date-picker v-model="all2.date" style="width: 500px;" type="month" value-format="yyyy-MM" placeholder="选择月"></el-date-picker>
        </div>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;">
        <div style="width: 100px;">上传表格</div>

        <div>
          <span style="margin-right: 20px;" v-if="all2.file">已上传文件</span>
          <el-upload ref="upload" action="#" :before-upload="uploasd2" :show-file-list="false" >
             <el-button type="primary" round style="margin-right: 20px;">导入收入</el-button>
          </el-upload>
        </div>
        <div @click="xiazai" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="daoru2">数据效验</el-button>
        <el-button type="danger" round @click="daoru">跳过效验直接导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import {
  	provinceAndCityData,
  	CodeToText,
  	TextToCode
  } from 'element-china-area-data'
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        log2:false,
        channel:[],
        citylist: provinceAndCityData,
        multipleSelection:[],
        times:[],
        loading:false,
        list:"",
        list2:"",
        all:{
          status:"",
          name:"",
          date:"",
          page:1,
          page_size:20
        },
        total:0,
        log:false,
        nowdateym:'',
        all2:{
          file:"",
          date:"",
          name:"",
          operator:"",
          channel:"",
          product_source:""
        },
        xuanzhong:{},
        jiaoyanlist:[],
        jiaoyanlog:false,
        qudaolaiyuanlists:[]
      }
    },
    created() {
      this.getlist()

      //获取运营商渠道
      axios.get('/api/plan-market/product/sources?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
             this.qudaolaiyuanlists = response.data.data
          } else {
             this.$message.error(response.data.msg.info);
          }
      })
    },
    mounted() {

    },
    methods: {
      shangchuanquerenbiao:function(file,item){
        console.log(item)
        let files = file.file
        var params = new FormData();
        params.append('file',files);
        params.append('id',item.id);
        axios.post('/api/plan-market/income2/confirmImport',params)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("上传表成功！");
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      choose:function(item){
        this.xuanzhong = JSON.parse(JSON.stringify(item))
      },

      daoru2:function(){
        console.log(this.all2)
        var params = new FormData();
        params.append('file',this.all2.file)
        params.append('date',this.all2.date)
        params.append('name',this.all2.name)
        params.append('operator',this.all2.operator)
        params.append('channel',this.all2.channel)
        params.append('product_source',this.all2.product_source)


        axios.post('/api/plan-market/income2/import/check',params)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.jiaoyanlist = response.data.data
              if(this.jiaoyanlist.length > 0){
                this.jiaoyanlog = true
              }else{
                this.$message.success('校验通过');
              }
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daoru:function(){
        console.log(this.all2)
        var params = new FormData();
        params.append('file',this.all2.file)
        params.append('date',this.all2.date)
        params.append('name',this.all2.name)
        params.append('operator',this.all2.operator)
        params.append('channel',this.all2.channel)
        params.append('product_source',this.all2.product_source)

        axios.post('/api/plan-market/income2/import',params)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.log2 = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //选择省市区
      changeaddress: function(v) {
      	this.all2.channel = CodeToText[v[0]] + CodeToText[v[1]]
      },
      log2kai:function(){
        this.all2 = {
          file:"",
          date:"",
          name:"",
          operator:"",
          channel:""
        }
        this.log2 = true
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      upup3:function(file){
        let files = file.file
        var params = new FormData();
        params.append('file',files);
        params.append('id',this.xuanzhong.id);
        axios.post("/api/plan-market/income2/uploadUpfile", params)
          .then(response=>{
              if (response.data.msg.code == 0) {
                  this.$message.success("导入确认表成功！");
                  this.getlist()
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      handleCommand(command) {

        if(command == 'b'){
          console.log(location.origin + '/' + this.xuanzhong.file_url)
          const a = document.createElement('a');
          a.setAttribute('download', '收入明细.xlsx');
          a.setAttribute('href',location.origin + '/' + this.xuanzhong.file_url);
          a.click();
        }
        if(command == 'c'){
          this.$confirm('确定要撤销导入?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             axios.post('/api/plan-market/income2/import/cancel',{id:this.xuanzhong.id})
                 .then(response => {
                     if(response.data.msg.code == 0){
                         this.loading = true
                         this.getlist()
                     }else{
                         this.$message.error(response.data.msg.info);
                     }
                 })
           })
        }
        if(command == 'd'){
            this.$confirm('此操作将撤销, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
             }).then(() => {

               // var that = this
               // axios.post('/api/plan-market/income/delete',{id:this.chooseid})
               //     .then(response => {
               //         if(response.data.msg.code == 0){
               //             that.loading = true
               //             that.getlist()
               //         }else{
               //             that.$message.error(response.data.msg.info);
               //         }
               //     })
             })
        }

      },

      uploasd2(file, fileList) {
        this.all2.file = file
        console.log(this.all2.file)
      },

      //统计
      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/income2/files',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //下载模板
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入收入.xlsx');
        a.setAttribute('href',location.origin + location.pathname + 'static/moban/daorushouru.xlsx');
        a.click();
      },
      xiazai2: function(url) {
        const a = document.createElement('a');
        a.setAttribute('download','确认表.xlsx');
        a.setAttribute('href',location.origin + '/' + url);
        a.click();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
